<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="labTop">
      <!--搜索框-->
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="params.query" :clearable="true">
            <el-button slot="append" icon="el-icon-search" @click="seek()"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!--表单项-->
      <el-table :data="order" border class="labTop">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="order_number" label="订单编号"></el-table-column>
        <el-table-column prop="order_price" label="订单价格"></el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-button v-if="scope.row.pay_status==0" type="danger" plain size="small">未付款</el-button>
            <el-button v-else type="success">付款</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"></el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">{{scope.row.create_time|dataFormat}}</template>
        </el-table-column>
        <!--操作编辑定位区-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="bianji(scope.row)" icon="el-icon-edit" size="small"></el-button>
            <el-tooltip
              class="item"
              effect="dark"
              content="查看当前地址"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="success"
                @click="positi(scope.row)"
                icon="el-icon-location"
                size="small"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区-->
      <el-pagination
       class="labTop"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!--修改地址-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" @close="cleraform('siteref')">
      <!--表单区-->
      <el-form :model="siteForm" :rules="siterules" ref="siteref" label-width="150px">
        <el-form-item label="省市区/区/县" prop="address">
          <el-cascader
           class="valwidth"
            v-model="siteForm.address"
            :options="city"
            :props="{ expandTrigger: 'hover' }"
            width='100%'
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="siteForm.address2"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!--查看地址-->
    <el-dialog title="当前的地址" :visible.sync="positiVisible" width="50%">
      <el-timeline :reverse="true">
        <el-timeline-item
          v-for="(activity, index) in positidate"
          :key="index"
          :timestamp="activity.ftime"
        >{{activity.context}}</el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
//导入城市的组件
import city from "./citydata";
export default {
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getinit();
  },
  data() {
    return {
      params: {
        query: "", //搜索关键字
        pagenum: 1, //当前页
        pagesize: 10 //当前页显示的数据
      },
      total: 0, //数据总条数
      order: [], //列表项
      //修改框的显示隐藏
      dialogVisible: false,
      //修改地址对象值
      siteForm: {
        address: [], //级联城市选择地区后的存储位
        address2: ""
      },
      //对象校验规则
      siterules: {
        address: [{ required: true, message: "请选择地址", trigger: "blur" }],
        address2: [{ required: true, message: "请输入文本值", trigger: "blur" }]
      },
      //级联选择器的城市集合
      city,
      //查看地址的显示与隐藏
      positiVisible: false,
      //物流的地址信息
      positidate: []
    };
  },
  methods: {
    //列表数据
    async getinit() {
      let { data: res } = await this.$http.get("orders", {
        params: this.params
      });
      if (res.meta.status != 200) {
        console.log(res.meta);
        return this.$message.ertaror("请求失败");
      }
      this.total = res.data.total;
      this.order = res.data.goods;
      console.log(res.data);
    },
    //当前页显示的数据条数
    handleSizeChange(val) {
      this.params.pagesize = val;
      this.getinit();
    },
    //当前页的处于第几页
    handleCurrentChange(val) {
      this.params.pagenum = val;
      this.getinit();
    },
    //搜索功能
    seek() {
      if (this.params.query != "") {
        //console.log(this.params.query);
        this.getinit();
      } else {
        this.$message.error("请输入搜索值");
      }
    },
    //修改地址弹框
    bianji(scope) {
      //渲染当前页面的文本框
      console.log(scope);
      //显示对话框
      this.dialogVisible = true;
    },
    //表单重置
    cleraform(dom) {
      this.$refs[dom].resetFields();
      //this.siteForm.address = [];
    },
    //查看地址
    async positi(scope) {
      //得到物流信息
      let { data: res } = await this.$http.get("/kuaidi/1106975712662");
      if (res.meta.status != 200) {
        return this.$message.error("物流信息获取失败");
      }
      this.positidate = res.data;
      //渲染物流信息并展示
      //显示物流信息对话框
      this.positiVisible = true;
      //console.log(scope);
      console.log(this.positidate);
    }
  }
};
</script>
<style scoped lang='less'>
.valwidth{
    width: 100%;
}
.labTop{
    margin-top: 15px;
}
/* @import url(); 引入css类 */
</style>